<!-- eslint-disable vue/multi-word-component-names -->
<template>
    <main class="page">
       <div class="layout nav-box">
            <router-link to="/" class="item">首页</router-link>
            <span> > </span>
            <router-link to="/schools" class="item">校区列表</router-link>
            <span> > </span>
            <router-link to="/" class="item active">校区详情</router-link>
       </div>
       <div class="wsc-banner">
            <div class="layout content">
                <el-image class="logo" v-if="detailData.logo" :src="detailData.logo"></el-image>
                <div class="cont-box">
                    <div class="title">
                        <h2>{{detailData.name}}</h2>
                        <span v-if="detailData.name_en">（ {{detailData.name_en}} ）</span>
                    </div>
                    <div class="tag">
                        <el-tag class="item" type="danger" effect="plain">录取分数：{{detailData.score}}</el-tag>
                        <el-tag class="item" type="danger" effect="plain">学费：{{detailData.money}}/每学期</el-tag>
                    </div>
                    <div class="desc">{{detailData.intro}}</div>
                    <div class="type">
                        类型：<span v-for="item in detailData.typesList">{{ item.name }}</span>
                    </div>
                </div>
            </div>
       </div>
       <div class="layout img-box">
            <div class="layout-title">学校图片
                <span class="tip">（点击图片可放大预览）</span>
            </div>
            <div class="content">
                <el-image class="img" v-for="item in imagesList" style="width: 215px; height: 150px" :src="item" :preview-src-list="imagesList">
                </el-image>
            </div>
        </div>

        <div class="wsc-f7f8fa  round-box">
            <div class="layout">
                <div class="layout-title">学校周边介绍</div>
                <div class="content">
                    <div class="intro">
                        {{ detailData.round }}
                    </div>
                    <div class="thumb">
                        <el-image class="img" v-for="item in roundsList" style="width: 215px; height: 150px" :src="item" :preview-src-list="roundsList">
                        </el-image>
                    </div>
                </div>
            </div>
        </div>
        

        <div class="layout video-box">
            <div class="layout-title">学校视频</div>
            <div class="content">
                <div class="item slate5-shadow" v-for="(item, index) in videoData.data" @click="replay(item)">
                    <div class="replay-box">
                        <img class="img" :src="item.image" alt="">
                        <div class="replay-cover"></div>
                    </div> 
                    <div class="title">{{item.name}}</div>
                </div>
            </div>
            <div class="more">
                <div class="refresh-btn" @click="videoMore">查看更多</div>
            </div>
        </div>

        <div class="wsc-red-line"></div>

        <el-dialog :title="video_name" :visible.sync="dialogVisible" width="60%">
            <div v-if="video_desc" style="margin-bottom: 10px;line-height: 26px;">{{video_desc}}</div>
            <div class="content" style="width: 100%;height: 500px;">
                <video width="100%" height="100%" src="http://oss.zhongguojiaoyunet.com/uploads/20240102/b6cddd3fb20e1aae438d75f623d1a7be.mp4" controls></video>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">关 闭</el-button>
            </span>
        </el-dialog>
    </main>
</template>
<script>
import Api from "@/Api.js";
export default {
    data() {
        return {
            id: '',
            page: 1,
            detailData: '',
            url: '',
            imagesList: [],
            roundsList: [],
            videoData: '',
            dialogVisible: false,
            video_name:'',
            video_desc:'',
        }
    },
    methods: {
        //数据填充
        getDetail(){
            let that = this;
            that.id = this.$route.query.id;
            Api.School.GetSchoolDetail({
                id: that.id,
            }).then((res) => {
                if (res.data.code == 1) {
                    that.detailData = res.data.data.detail;
                    that.imagesList = res.data.data.detail.imagesList;
                    that.roundsList = res.data.data.detail.roundsList;
                    that.videoData = res.data.data.videoData;
                }
            })
        },

        //更多视频
        videoMore() {
            let that = this;
            if(that.videoData.current_page == that.videoData.last_page){
                that.$message.error('暂无更多视频');
                return false;   
            }
            that.page ++;
            Api.School.GetSchoolVideo({
                page: that.page,
            }).then((res) => {
                if (res.data.code == 1) {
                    that.videoData.current_page = res.data.data.current_page;
                    that.videoData.last_page = res.data.data.last_page;
                    that.videoData.per_page = res.data.data.per_page;
                    that.videoData.total = res.data.data.total;
                    that.videoData.data = that.videoData.data.concat(res.data.data.data);
                }
            })
        },

        //播放视频
        replay(item){
            this.dialogVisible = true;
            this.video_name = item.name;
            this.video_desc = item.desc;
        },

    },
    mounted() {
        this.getDetail();
    },
    watch: {
        '$route' () {
            this.getDataListInit();
        }
    }
}
</script>
<style scoped lang="less">
/* scoped 让style样式 局部生效*/
.page{
    min-height: calc(100vh - 300px);
}

.nav-box{
    display: flex;
    align-items: center;

    .item{
        font-size: 14px;
        line-height: 30px;
        padding: 15px 0;
        color: #999999;
        text-decoration: none;
        margin: 0 10px;
    }

    span{
        font-size: 14px;
        color: #999999;
    }

    .item.active{
        color: #D11A2D;
    }
}

.nav-box:before{
    display: block;
    content: '';
    width: 22px;
    height: 19px;
    background-image: url(../../assets/icon/home-ico.png);
    background-repeat: no-repeat;
    background-position: left center;
}

.wsc-banner{
    width: 100%;
    background-image: url(../../assets/images/school-banner-bg.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    position: relative;
    padding: 30px 0;

    .logo{
        width: auto;
        height: 80px;
        margin-bottom: 20px;
        margin-left: 30px;
    }

    .content{
        padding-right: 100px;
    }

    .tag{
        margin-top: 20px;
    }
    .tag .item{
        margin-right: 10px;
    }

    .cont-box{
        min-height: 300px;
        padding: 20px 30px;
        background: rgba(255, 255, 255, 0.7);
        border-radius: 10px;
    }

    .title{
        display: flex;
        align-items: center;

        h2{
            font-size: 30px;
            font-weight: bold;
            color: #111111;
            margin: 0;
        }

        span{
            margin-left: 10px;
            font-size: 18px;
            color: #666666;
        }
    }

    .desc{
        margin-top: 20px;
        line-height: 30px;
    }

    .type{
        margin-top: 20px;

        span::after{
            display: inline-block;
            content: '、';
        }
        span:last-child::after{
            content: '';
        }
    }
}

.layout-title .tip{
    font-weight: normal;
    font-size: 16px;
    color: #999999;
    margin-left: 5px;
}

.img-box{
    margin-top: 30px;

    .content{
        display: flex;
        flex-wrap: wrap;
    }

    .img{
        margin: 10px;
    }
}

.round-box{
    padding: 40px 0;
    margin-top: 30px;

    .intro{
        text-indent: 2em;
        line-height: 30px;
        margin-top: 20px;
    }

    .thumb{
        margin-top: 20px;
    }

    .img{
        margin: 10px;
    }
}

.video-box{
    margin-top: 30px;

    .content{
        margin-top: 30px;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        margin-left: -10px;
        margin-right: -10px;
    }

    .item{
        margin: 10px;
        width: 282px;
        display: block;
        border-radius: 5px;
        overflow: hidden;
        background: #ffffff;
        text-decoration: none;
        border: 1px solid #eeeeee;
    }

    .replay-box{
        width: 282px;
        height: 170px;
        position: relative;

        .replay-cover{
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.35);
            opacity: 0;
            transition: all .25s;
        }

        .replay-cover:before {
            content: '';
            position: absolute;
            left: 50%;
            top: 55%;
            margin: -30px 0 0 -30px;
            width: 60px;
            height: 60px;
            transition: all .25s;
            background-image: url(../../assets/icon/replay.png);
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center;
            -webkit-transform: scale(1.5);
            transform: scale(1.5);
        }
    }

    .item:hover .replay-cover {
        opacity: 1
    }
    
    .item:hover .replay-cover:before {
        -webkit-transform: scale(1);
        transform: scale(1)
    }

    .img{
        width: 282px;
        height: 170px;
        object-fit: cover;
    }
    
    .title{
        padding: 0 10px;
        text-decoration: none;
        color: #333333;
        font-size: 16px;
        line-height: 40px;
        height: 50px;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
    }

    .title:hover{
        color: #D11A2D;
    }

    .more{
        margin-top: 20px;
        display: flex;
        justify-content: center;
    }

    .refresh-btn{
        border-radius: 5px;
        transition: all .2s;
        background: #fff;
        color: #666;
        text-align: center;
        cursor: pointer;
        display: inline-block;
        width: 160px;
        height: 40px;
        border: 1px #ddd solid;
        line-height: 38px;
        background: #f7f8fa;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .refresh-btn:hover{
        background: #D11A2D;
        color: #FFFFFF;
    }

}

.wsc-red-line{
    margin-top: 40px;
    width: 100%;
    height: 6px;
    background: #D11A2D;
}
</style>